<template>
  <div id="tab-bar" >
    <div class="tab-bar-item-div">
      <tab-bar-item path="/home" >
        <template v-slot:item-icon>
          <svg-icon iconname="zhiran-iconshouye" style="font-size: 20px;color: #409EFF"></svg-icon>
        </template>
        <template v-slot:item-main>
          <el-button type="text"  class="tabbar-item-text ZOOL-font-family" style="color: #409EFF">首页</el-button>
        </template>
      </tab-bar-item>
    </div>
    <div class="tab-bar-item-div">
      <tab-bar-item path="/feedback" >
        <template v-slot:item-icon>
          <svg-icon iconname="zhiran-iconyijianfankui" style="font-size: 20px;color: #459323"></svg-icon>
        </template>
        <template v-slot:item-main>
          <el-button type="text"  class="tabbar-item-text ZOOL-font-family" style="color: #459323">反馈</el-button>
        </template>
      </tab-bar-item>

    </div>
    <div class="tab-bar-item-div">
      <tab-bar-item path="/notice">
        <template v-slot:item-icon>
          <svg-icon iconname="zhiran-icongonggao1" style="font-size: 20px;color: #ff8800"></svg-icon>
        </template>
        <template v-slot:item-main>
          <el-button type="text" class="tabbar-item-text ZOOL-font-family" style="color: #ff8800">公告</el-button>
        </template>
      </tab-bar-item>
    </div>

    <div class="tab-bar-item-div">
      <tab-bar-item path="/edit-article">
        <template v-slot:item-icon>
          <svg-icon iconname="zhiran-iconshangchuanziyuan" style="font-size: 20px;color: #aa00ff"></svg-icon>
        </template>
        <template v-slot:item-main>
          <el-button type="text" class="tabbar-item-text ZOOL-font-family" style="color: #aa00ff">上传</el-button>
        </template>
      </tab-bar-item>
    </div>
    <div class="tab-bar-item-div" style="cursor: pointer">
      <el-popover
          placement="bottom"
          width="200"
          trigger="hover"
          ref="profile-popover">
        <div style="text-align: center;font-weight: bold">
          {{this.$store.state.zrUser.zrNickname}}
        </div>
        <div style="display: block;padding: 0">
            <div class="float-div" style="text-align: center;">
              <svg-icon iconname="zhiran-iconshu"></svg-icon>
              <span>
                等级:{{this.userLevelText}}
              </span>
            </div>
            <div class="float-div-right" style="margin-right: 0">
              <svg-icon iconname="zhiran-iconcandou"></svg-icon>
              <span>
                {{this.userBeanText}}
              </span>
            </div>
        </div>
        <div  style="margin-top: 3px;display: block">
          <div class="float-div" style=" margin-right: 20px;" >
            <span style="font-size: 12px;font-weight:bold;text-align: center;">
              LV.{{this.$store.state.zrUser.zrLevel}}
            </span>
          </div>
          <div class="float-div" style="">
            <svg-icon iconname="zhiran-iconbenpao"></svg-icon>
          </div>
          <div class="float-div-right" style="margin-right: 0" >
            <span style="font-size: 12px;font-weight:bold;">
              LV.{{this.$store.state.zrUser.zrLevel+1}}
            </span>
          </div>
        </div>
        <div style="margin-left: 0">
          <el-progress :percentage="userGrowthPercentage" :text-inside="true" :stroke-width="15" :format="userGrowthText"></el-progress>
        </div>
        <div class="el-dropdown-link" style="margin-right: 20px" slot="reference" @click.stop="profileSelect">
          <el-avatar :src=avatar :size="45" ></el-avatar>&nbsp;&nbsp;
        </div>
      </el-popover>
      <div>
        <login-dialog :open-dialog="dialogVisibility" @closeDialog="dialogVisibilityChange"></login-dialog>
      </div>
    </div>

  </div>

</template>

<script>
import {userGrowthMap, userLevelMap} from "../../store/userAttributeMap";
const TabBarItem =()=>import("./TabBarItem")
const loginDialog = ()=>import("../logindialog/LoginDialog")

export default {
  name: "TabBar",
  data() {
    return{
      activeTabIndex:'1',
      avatar:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      dialogVisibility:false,
      growthPercentage:0
    }
  },
  methods: {
    profileSelect(){
      console.log("profile被点击")
      if (!this.$store.state.loginStatus){
        this.dialogVisibility = true
      }
      //todo 打开profile页面
    },

    dialogVisibilityChange(){
      console.log("父组件中检测到关闭")
      this.dialogVisibility = false
    },

    userGrowthText(){
      let growth = this.$store.state.zrUser.zrGrowth
      let level = this.$store.state.zrUser.zrLevel
      let levelUpGrowth = userGrowthMap.get(level+1)
      return growth +"/" +levelUpGrowth
    },
    getLevelText(){
      return userLevelMap.get(this.$store.state.zrUser.zrLevel)
    },
    getLevelUpText(){
      return userLevelMap.get(this.$store.state.zrUser.zrLevel+1)
    }
  },
  computed:{
    userLevelText(){
      let level = this.$store.state.zrUser.zrLevel
      return userLevelMap.get(level)
    },
    userBeanText(){
      let beans = this.$store.state.zrUser.zrBeans
      return "蚕豆："+beans
    },
    userGrowthPercentage(){
      let level = this.$store.state.zrUser.zrLevel
      let growth = this.$store.state.zrUser.zrGrowth
      let levelUpGrowth = userGrowthMap.get(level+1)
      let percentage =  growth/levelUpGrowth
      console.log(percentage)
      return percentage*100
    }
  },
  components:{
    loginDialog,
    TabBarItem
  }
}
</script>

<style scoped>
  .box-card{
    width: 200px;
    height: 80px;
    padding: 0;
  }
  .card-text{
    font-size: 15px;
    margin-top: 10px;
    margin-left: 10px;
    font-weight: bold;
    /*text-align: center;*/
    color: black;
  }

  .float-div{
    float: left;
  }
  .float-div-right{
    float: right;
  }
  p{
    font-size: 5px;
  }
  .el-menu-item-normal{
    margin-top: -15px
  }
  #tab-bar{
    margin: 0 auto;
    width: 100%;
    height:60px;
    text-align: center;
    display: block;
    /*border-bottom: .5px solid gray;*/
    background-color: #ffffff;
    box-shadow: rgba(9, 30, 66, 0.25) 0 3px 5px -2px, rgba(9, 30, 66, 0.08) 0 0 0 1px;

  }
  .tab-bar-item-div{
    float: left;margin:8px 12px 0 12px;
  }

  .tabbar-item-text{
    font-size: 20px;
  }


</style>